<template>
	<view class="container">
		<u-index-list
			ref="indexList"
			:index-list="indexList"
			activeColor="#CF1A1B"
			@selectIndex="selectAnchor"
			:indexListShow="indexListShow"
		>
			
			<!-- 自定义内容 -->
			<view class="slot-content" slot="header">
				<view class="sc-search">
					<uni-easyinput
						prefixIcon="search"
						v-model="value"
						placeholder="请输入城市名称查询"
						@confirm="handleSearch"
						@clear="handleClear"
					></uni-easyinput>
				</view>
				<view class="sc-hotCity">
					<text class="sch-label">定位城市</text>
					<view class="sch-nowCity" @click="handleSelect(null)">
						<uni-icons type="location-filled" size="20" color="#CF1A1B"></uni-icons>
						<text class="schn-text">{{ cityName }}</text>
					</view>
				</view>
			</view>
			
			<!-- 列表 -->
			<view v-for="(item, index) in itemArr" :key="index" :id="indexList[index]">
				<u-index-item >
					<u-index-anchor
						v-if="item.length"
						:text="indexList[index + 1]"
						size="30"
						height="70"
						bgColor="transparent"
					></u-index-anchor>
					<view class="list-cell" v-for="(cell, index1) in itemArr[index]" :key="cell.cityName" @click="handleSelect(cell)">
						{{ cell.cityName }}
					</view>
				</u-index-item>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	import { mapMutations, mapGetters } from 'vuex'
	export default {
		data() {
			return {
				value: '',
				indexListShow: true,	// 右侧锚点是否显示
				indexList: [],
				itemArr: [],
				cityData: [],	// 所有数据
				cityName: '',
				source: null // 来源
			};
		},
		onLoad(query){
			this.source = query.source
			this.initData()
			this.getNowCity()
		},
		computed: {
			...mapGetters('global', ['getLocation', 'getNowLocation'])
		},
		methods: {
			...mapMutations('global', ['setLocation']),
			selectAnchor(e){
					//从当前位置到达目标位置
					uni
						.createSelectorQuery()
						.select('#' + e) 
						.boundingClientRect((data) => {
							//目标位置的节点：类或者id
							uni
								.createSelectorQuery()
								.select('.container')
								.boundingClientRect((res) => {
									//最外层盒子的节点：类或者id
									this.$nextTick(function () {
										// data 存在点击的则是A-Z, 否则点击的是自定义锚点（定）
										if(data){
											// 获取点击的锚点，当前有几个子集
											const id = data.id
											const itemLength = this.cityData.find(i => i.initial === id).cityList.length
											uni.pageScrollTo({
												// 计算向上卷去的高度（这里样式写的是40）， + 1是要把标题计算在内
												scrollTop: data.top - res.top - (40 * (itemLength + 1)),
												duration: 0 //app端这个必须设置成0
											})
										}else {
											uni.pageScrollTo({
												scrollTop: 0,
												duration: 0 //app端这个必须设置成0
											})
										}
										// uni.pageScrollTo({
										// 	scrollTop: data ? data.top - res.top - (40 * itemLength + 36) : 0,
										// 	duration: 0 //app端这个必须设置成0
										// })
									})
								})
								.exec()
						})
						.exec()
			},
			getNowCity(){
				const { cityName } = this.getNowLocation
				this.cityName = cityName
			},
			handleSelect(cell){
				if(cell){
					this.setLocation({
						cityName: cell.cityName,
						cityCode: cell.cityCode,
						longitude: cell.lng,
						latitude: cell.lat,
					})
				} else {
					const { cityName, cityCode, longitude, latitude } = this.getNowLocation
					this.setLocation({
						cityName,
						cityCode,
						longitude,
						latitude,
					})
				}
				
				if(this.source === 'storeList'){	// 门店列表
					uni.switchTab({
						url: '/pages/store/list/list'
					})
				}else if (this.source === 'index') {
					uni.switchTab({
						url: '/pages/index/index/index'
					})
				}
				
			},
			handleSearch(){
				this.initData()
			},
			handleClear(){
				this.initData()
				this.indexListShow = true
				this.$refs.indexList.activeIndex = -1
			},
			async initData(){
				uni.showLoading({
					title: '加载中...'
				})
				const res = await this.$request({
					method: 'GET',
					url: '/api-user/region/app/choiceCityList',
					data: {
						keyword: this.value,
					}
				})
				this.indexList = ['定']
				this.itemArr = []
				res.datas.cityData.forEach(i => {
					if(i.cityList.length){
						this.indexList.push(i.initial)
						this.itemArr.push(i.cityList)
					}
				})
				
				
				this.cityData = res.datas.cityData || []
				
				if(!this.itemArr.length){
					this.indexListShow = false
				}
				
				// this.indexList.unshift('定')
				
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 20px 30px 20px 20px;
	background-color: #ffffff;
	min-height: 100vh;
	/deep/ scroll-view {
		max-height: 100% !important;
	}
	.slot-content {
		margin-bottom: 20px;
		/deep/ .uni-easyinput__content {
			background-color: #F3F3F3 !important;
		}
		.sc-hotCity {
			font-size: 14px;
			.sch-label {
				display: inline-block;
				margin: 20px 0;
			}
			.sch-nowCity {
				width: 72px;
				display: flex;
				align-items: center;
				color: $uni-primary;
				background-color: #f1f3ff;
				.schn-text {
					padding: 4px 0;
				}
			}
		}
	}
	
	// 右侧锚点距离顶部距离
	// /deep/ .u-index-list__letter {
	// 	top: 60px !important;
	// }
	
	// 列表A-Z，label的边距
	// /deep/ .u-index-anchor {
	// 	padding: 0;
	// }
	// 列表城市的边距
	.list-cell {
		padding-left: 16px;
		line-height: 40px;
	}
	
	// 列表每块内容相隔的边距
	/deep/ .u-border-bottom {
		margin-top: 20px;
		margin-bottom: 6px;
		// border: none;
	}
}
</style>
